const comments = [
    {
        name: "夏彦长命百岁",
        comment:
            "你放心，不管遇到什么，我都会保护你，不让你受到一点伤害。",
        time: "Thu Oct 1 2023 11:34:02 GMT+0800 (中国标准时间)",
    },
    {
        name: "左夫人",
        comment:
            "你放心，不管遇到什么，我都会保护你，不让你受到一点伤害。",
        time: "Thu Oct 12 2023 21:04:00 GMT+0800 (中国标准时间)",
    },
];
const commentsBox = document.querySelector('#comments');
let nameInput = document.querySelector("#name");
let commentInput = document.querySelector("#comment");
const btnSubmit = document.querySelector("#btn-submit");
const btnCLose = document.querySelector(".btn-close");

const rennderComments=function(comments){
    commentsBox.innerHTML = "";
    comments.forEach((item) => {
        commentsBox.insertAdjacentHTML(
            'beforeend',
            `<hr>
            <h4>
                <span>${item.name}</span>
                <span class="date">${item.time}</span>
            </h4>
            <p>${item.comment}</p>
            `
        )
    })
}

rennderComments(comments);

btnSubmit.onclick = function () {
    let nameStr = nameInput.value.replace(/<(\/?\w+)>/g, "&lt;$1&gt;");
    let commentStr = commentInput.value.replace(/<(\/?\w+)>/g, "&lt;$1&gt;");
    comments.unshift(
        {
            name: nameStr,
            comment: commentStr,
            time: new Date(),
        }
    );
    rennderComments(comments);
}

let isClose = false;
btnCLose.onclick=function(){
    if(!isClose){
        btnCLose.textContent = "开启留言";
    }else{
        btnCLose.textContent = "关闭留言";
    }
    isClose = !isClose;
    nameInput.disabled=!nameInput.disabled;
    commentInput.disabled = !commentInput.disabled;
    btnSubmit.disabled = !btnSubmit.disabled;
}